    



<template>
  <div class="tou2">
    <div class="shop">
      <MyHead title="分类" :back="false"></MyHead>
      <div class="shop-box">
        <div>
          <van-sidebar v-model="activeKey">
            <van-sidebar-item
              :title="l.typeName"
              :name="i"
              v-for="(l, i) in mlist"
              :key="i"
            />
          </van-sidebar>
        </div>
        <div class="box">
          <div v-for="(l, i) in mlist" :key="i">
            <Glist :list="l.categoryLogicVOList" v-if="activeKey == i"></Glist>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mlist:'',
      activeKey: 0,
    };
  },
  methods: {
    async getbzList() {
      let res = await this.$ajax.getList();
      this.mlist = res.data.vo;
      console.log(res);
      console.log(this.mlist);
    },
  },
  mounted() {
    this.getbzList();

  },
};
</script>

<style lang="scss" scoped>
.top {
  background: rgb(212, 236, 255);
}
.tou2 {
  padding-bottom: 50px;
}
.shop {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .shop-box {
    width: 100%;
    height: 100%;
    display: flex;
    .box {
      flex: 1;
      height: 100%;
      flex-shrink: 0;
    overflow-y: auto;
    
    }
  }
}
.rlist {
  width: 100%;
  padding: 15px;
  li {
    margin-top: 15px;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 10px;
    a {
      width: 100%;
      .img {
        width: 100%;
        height: 200px;
      }
    }
    .info {
      margin-top: 10px;
      .title {
        color: #666;
      }
      .text {
        display: flex;
        justify-content: space-between;
        margin-top: 6px;
        .price {
          color: deeppink;
        }
        .type {
          color: #999;
        }
      }
    }
  }
}
img {
  width: 100%;
  height: 100%;
}
.shop-box{
  position: absolute;
}
.van-sidebar{
     flex-shrink: 0;
    overflow: auto;
    position: relative;
    padding-bottom: 46px;
}



// flex-shrink: 0;
//     overflow-y: auto;
</style>